<template>
  <div class="container" v-if="$route.path === '/canteen/dishes-manger'">
    <div class="header">
      <div class="hd-left">
        <el-form :inline="true" :model="searchForm" ref="searchRef">
          <el-form-item label="菜品名称" prop="name"
            ><el-input
              placeholder="请输入菜品名称"
              size="small"
              v-model="searchForm.name"
              style="width: 140px"
            ></el-input
          ></el-form-item>
          <el-form-item label="食堂" prop="canteenId">
            <el-select
              v-model="searchForm.canteenId"
              placeholder="请选择"
              size="small"
              style="width: 100px"
            >
              <el-option
                v-for="item in canteenData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编号" prop="number">
            <el-input
              placeholder="请输入编号"
              size="small"
              v-model="searchForm.number"
              style="width: 100px; margin-right: 10px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <TsButton
              type="primary"
              size="small"
              icon="el-icon-search"
              @click="search"
              perms="food:page:get"
              label="搜索"
            ></TsButton>
            <el-button size="small" icon="el-icon-refresh-right" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="hd-right c-m-t-5">
        <TsButton
          type="primary"
          size="small"
          @click="edit"
          perms="food:post"
          label="新增"
        ></TsButton>
        <TsButton
          label="删除"
          perms="food:delete"
          type="danger"
          size="small"
          @click="mutipleDel"
        ></TsButton>
        <TsButton
          label="提交"
          type="primary"
          size="small"
          @click="mutipleSubmit"
          perms="food:submit:put"
        ></TsButton>
        <TsButton
          type="danger"
          size="small"
          @click="down"
          perms="food:up:$id:put"
          label="下架"
        ></TsButton>
      </div>
    </div>
    <!--    表格区域-->
    <div class="table" style="height: calc(100% - 160px); overflow-y: auto">
      <el-table
        ref="multipleTable"
        :header-cell-style="{ background: '#FEF6F6' }"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="编号" prop="number"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column label="图片">
          <template #default="scope">
            <el-image
              :src="scope.row.images"
              style="width: 100px; height: 60px"
            >
              <template #error>
                <div class="image-slot">
                  <img
                    src="https://www.mingxiaobang.cn/upload/admin/food_1.jpg"
                    style="width: 100px; height: 60px"
                  />
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="commentCount" sortable label="评论数">
        </el-table-column>
        <el-table-column prop="clickCount" sortable label="点赞数">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="warning" size="small">
              待提交
            </el-tag>
            <el-tag v-if="scope.row.status === 2" type="warning" size="small">
              待审核
            </el-tag>
            <el-tag v-if="scope.row.status === 3" type="info" size="small">
              已下架
            </el-tag>
            <el-tag v-if="scope.row.status === 4" type="success" size="small">
              在售中
            </el-tag>
            <el-tag v-if="scope.row.status === 5" type="error" size="small">
              驳回
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="canteen" label="所属食堂">
          <template #default="scope">
            <span>{{ scope.row.canteen.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template #default="scope">
            <span>{{ scope.row.foodType.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="240px">
          <template #default="scope">
            <TsButton
              icon="el-icon-edit"
              label="编辑"
              type="text"
              perms="food:$id:put"
              @click="edit(scope.row)"
              v-show="
                scope.row.status === 1 ||
                scope.row.status === 3 ||
                scope.row.status === 5
              "
            ></TsButton>
            <TsButton
              icon="el-icon-warning-outline"
              label="详情"
              type="text"
              perms="food:$id:put"
              @click="toDetail(scope.row.id)"
              v-show="scope.row.status === 2 || scope.row.status === 4"
            ></TsButton>
            <TsButton
              icon="el-icon-delete"
              style="color: #ff5d5d"
              type="text"
              perms="food:$id:delete"
              v-show="scope.row.status !== 2"
              @click="del(scope.row.id)"
              label="删除"
            ></TsButton>
            <TsButton
              style="color: #ff5d5d"
              icon="el-icon-download"
              type="text"
              @click="changeUpper(scope.row)"
              perms="food:down:put"
              label="下架"
              v-show="scope.row.status === 4"
            >
            </TsButton>
            <TsButton
              style="color: #00aa00"
              icon="el-icon-circle-check"
              type="text"
              @click="foodSignSubmit(scope.row.id)"
              perms="food:submit:put"
              label="提交"
              v-show="scope.row.status === 1 || scope.row.status === 3"
            >
            </TsButton>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="float: right; margin: 20px"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      background
    >
    </el-pagination>
  </div>
  <router-view></router-view>
</template>

<script>
import dish from "@/composables/canteen/dishes-manger";
import commonPageRepository from "../../../composables/common-page-repository";
import TsButton from "../../../components/TsButton";

export default {
  components: { TsButton },
  setup() {
    const {
      selectCanteen,
      mutipleDel,
      option,
      optionValue,
      filterStatus,
      filterCanteen,
      filterType,
      tableData,
      edit,
      pageNum,
      pageSize,
      totalNum,
      getDishesData,
      multipleTable,
      upper,
      handleSelectionChange,
      down,
      del,
      changeUpper,
      searchForm,
      searchRef,
      search,
      canteenData,
      reset,
      toDetail,
      mutipleSubmit,
      foodType,
      foodSignSubmit,
    } = dish();
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getDishesData
    );
    return {
      selectCanteen,
      mutipleDel,
      option,
      optionValue,
      filterStatus,
      filterCanteen,
      filterType,
      tableData,
      edit,
      pageNum,
      pageSize,
      totalNum,
      pageSizeChange,
      pageCurrentChange,
      multipleTable,
      upper,
      handleSelectionChange,
      down,
      del,
      changeUpper,
      searchForm,
      searchRef,
      search,
      canteenData,
      reset,
      toDetail,
      mutipleSubmit,
      foodType,
      foodSignSubmit,
    };
  },
  name: "DishesManger",
};
</script>

<style scoped lang="scss">
.container {
  margin-top: 20px;
  background: #ffffff;
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);

  .header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
